<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/message_icon.png">
    <title>ChatBA客户端</title>
    <script src="./js/vue2.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 自定义函数库 -->
    <script src="./js/index.js"></script>
    <!-- 自定义css库 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="app">
        <div class="top">
            <el-container>
                <el-aside width="300px">
                    <div class="logo-div">
                        <img class="logo-img" src="./images/black_white_logo.png">
                    </div>
                    <div class="conversation-list-container">
                        <div class="conversation-list">
                            <el-card shadow="hover" v-for="(item,index) in fileListInfo" :key="item.conversation_id">
                                <div class="conversation">
                                    <div class="conversation-title">{{item.file_name}}</div>
                                    <div class="conversation-btn"><el-button type="text" @click="deleteFile(item.file_name)"><i class="el-icon-close"></i></el-button></div>
                                </div>
                            </el-card>
                            
                        </div>
                        <div class="conversation-add">
                            <el-button class="add-btn" type="primary" icon="el-icon-plus" @click="uploadFile">上传文件</el-button>
                        </div>
                    </div>
                    <div class="controller-container">
                        <!-- <div class="controller-item">
                            <div class="controller-label">
                                历史对话数:
                            </div>
                            <div class="controller-compoment">
                                <el-input-number class="item" v-model="req_params.history_len" :min="0" :max="10"></el-input-number>
                            </div>
                        </div> -->
                        <div class="controller-item">
                            <div class="controller-label">
                                temperature:
                            </div>
                            <div class="controller-compoment">
                                <el-slider class="item" v-model="temperature" :format-tooltip="formatTemperature"></el-slider>
                            </div>
                        </div>
                        <div class="controller-item">
                            <div class="controller-label">
                                top_p 抽样:
                            </div>
                            <div class="controller-compoment">
                                <el-slider class="item" v-model="top_p" :format-tooltip="formatTop_p"></el-slider>
                            </div>
                        </div>
                        <div class="controller-item">
                            <div class="controller-label">
                                max_tokens:
                            </div>
                            <div class="controller-compoment">
                                <el-slider class="item" v-model="max_tokens" :format-tooltip="formatMax_tokens"></el-slider>
                            </div>
                        </div>
                    </div>
                </el-aside>
                <el-main>
                    <div class="message-container" ref="scrollContainer">
                        <div v-for="(message,index) in history_messages" :key="index">
                            <div v-if="message['input']" class="human_message-container">
                                <i v-if="message['is_sending']" class="el-icon-loading loading-icon"></i>
                                <div class="human-message">{{message['input']}}</div>
                                <div class="human-logo"><i class="el-icon-user-solid"></i></div>
                            </div>
                            <div v-if="message['output']" class="ai-message-container">
                                <div class="ai-logo">
                                    <img src="./images/message_icon.png">
                                </div>
                                <div class="ai-message-retriveal">
                                    <div class="ai-message">
                                        {{message['output']}}
                                    </div>
                                    <div v-if="message['retriveal']" class="retriveal-info-container">
                                        <div class="info" v-for="(item,index) in message['retriveal']" :key="index">
                                            <i class="el-icon-document"></i>
                                            {{item}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="submit-container">
                        <div class="text-container">
                            <el-input
                                type="textarea"
                                autosize
                                maxlength="1024"
                                show-word-limit
                                resize="none"
                                placeholder="Message ChatBA..."
                                v-model="req_params.query">
                            </el-input>
                        </div>
                        <div class="btn-container">
                            <el-button  type="primary" icon="el-icon-chat-dot-round" round @click="handlerSendMessage">发送</el-button>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </div>
        <div class="footer">
            <span style="font-size:small">Powered by: OpenNLG Copyright © {{ new Date().getFullYear() }} 寻梦</span>
        </div>


        <el-dialog
        title="上传文件"
        :visible.sync="add_dialogVisible"
        width="30%"
        :close-on-click-modal="false">
        <el-upload
            width="100%"
            class="upload-container"
            drag
            :file-list="fileList"
            :on-change="handleChangeUploadFiles"
            :on-remove="handleRemoveFiles"
            :auto-upload="false"
            action="#"
            name="file"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传doc/docx/pdf文件</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
            <el-button @click="add_dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doUploadFile">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</body>
<script>
    
    var app=new Vue({
        el:"#app",
        data:{
            fileList:[],
            fileListInfo:[],
            conversation_list:[],
            history_messages:[],
            current_conversation_id:"",
            new_conversation_title:"",
            temperature:95,
            top_p:70,
            max_tokens:50,
            add_dialogVisible:false,
            canSend:true,
            req_params:{
                query:'',
                temperature:0.95,
                top_p:0.7,
                max_tokens:512
            }
        },
        mounted() {
            let that=this
            window.addEventListener("keydown", function(e) {
                if (e.ctrlKey && e.keyCode==13){
                    that.handlerSendMessage()
                }
            }, false);
            // 刷新文件列表
            this.flashFileListInfo()
        },
        methods:{
            flashScroll(){
                this.$nextTick(() => { // 确保DOM已经更新完成
                    const container = this.$refs.scrollContainer;
                    if (container) {
                        container.scrollTop = container.scrollHeight - container.clientHeight;
                    }
                });
            },
            async flashFileListInfo(){
                let response=await getRetrivealFileListAPI()
                response.json().then((res)=>{
                        if (res && res.code==200){
                            this.fileListInfo=res.data
                        }else{
                            this.$message({
                                type:"warning",
                                message:res.msg
                            })
                        }
                })
            },
            handleChangeUploadFiles(file, fileList){
                this.fileList=fileList
            },
            handleRemoveFiles(file, fileList){
                this.fileList=fileList
            },
            changeConversation(item){
                this.current_conversation_id=item.id
                this.history_messages=item.history_messages
            },
            async deleteFile(file_name){
                let response=await deleteRetrivealFileAPI(file_name)
                response.json().then((res)=>{
                        if (res && res.code==200){
                            this.flashFileListInfo()
                            this.$message({
                                type:"success",
                                message:res.msg
                            })
                        }else{
                            this.$message({
                                type:"warning",
                                message:res.msg
                            })
                        }
                })
            },
            uploadFile(){
                this.add_dialogVisible=true
            },
            async doUploadFile(){
                if (this.fileList.length<=0){
                    this.$message({
                        type:"warning",
                        message:"请选择文件"
                    })
                    return
                }
                const formatData=new FormData()
                this.fileList.forEach((file)=>{
                    formatData.append("files",file.raw)
                })
                formatData.append("override",true)
                formatData.append("is_vector_store",true)
                let response=await uploadFilesAPI(formatData)
                response.json().then((res)=>{
                        if (res && res.code==200){
                            this.flashFileListInfo()
                            this.$message({
                                type:"success",
                                message:res.msg
                            })
                        }else{
                            this.$message({
                                type:"warning",
                                message:res.msg
                            })
                        }
                        this.add_dialogVisible=false
                    })
            },
            formatTemperature(val){
                let value= val/100
                this.req_params.temperature=value
                return value
            },
            formatTop_p(val){
                let value= val/100
                this.req_params.top_p=value
                return value
            },
            formatMax_tokens(val){
                let value= Math.floor(val*(1024/100))
                this.req_params.max_tokens=value
                return value
            },
            async handlerSendMessage(){
                if (this.canSend && this.req_params.query!='' && this.req_params.query!=undefined){
                    this.canSend=false
                    if (this.req_params.history_len<=0){
                        this.req_params.history=[]
                    }else{
                        this.req_params.history=[]
                        for (let i = this.history_messages.length-1;i>=Math.max(0,this.history_messages.length-this.req_params.history_len);i--){
                            this.req_params.history.unshift(this.history_messages[i])
                            this.req_params.history=JSON.parse(JSON.stringify(this.req_params.history))
                        }
                    }
                    let message_item={
                        input:this.req_params.query+'',
                        output:'',
                        is_sending:true
                    }
                    this.history_messages.push(message_item)
                    console.log(this.req_params)
                    this.flashScroll()
                    let response=await sendRetrivealMesssageToOpenBA(this.req_params)
                    response.json().then((res)=>{
                        if (res && res.code==200){
                            message_item.output=res.data.answer
                            message_item.retriveal=res.data.files
                            message_item.is_sending=false
                            this.req_params.query=''
                        }else{
                            this.history_messages.pop()
                            this.req_params.query=''
                        }
                        this.flashScroll()
                        this.canSend=true
                    })
                }
            }
        }
    })
</script>
</html>